// webpack 是 node 写出来的, node的写法
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devServer: {
        // 开发服务器的配置
        port: 5000,
        progress: true,
        contentBase: './build',
        compress: true,
        open: true
    },
    // mode: 'development', // 默认两种 production development
    mode: 'production',
    entry: {
        home: './src/index.js',
    }, //  入口
    // 1. 源码映射 会单独生成一个 sourcemap 文件 出错啦 会标识当前的列和行  大而全 而且是独立的
    //devtool: 'source-map', // 增加映射文件 可以帮我们调试源代码
    // 2. 不会产生单独的文件, 但是可以显示 行 和 列
    //devtool: 'eval-source-map', // 增加映射文件 可以帮我们调试源代码
    // 3. 不会产生列 但是是一个单独的映射文件
    // devtool: 'cheap-module-source-map', // 产生后可以保留起来 监控用
    // 4. 不会产生列 不会产生文件 集成在打包后的文件中
    devtool: 'cheap-module-eval-source-map', 
    output: {
        filename: '[name].js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径 
        // publicPath: 'http://www.zhufengpeixun.cn',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
        }),
    ],
    externals: {
    },
    module: { // 模块
        rules: [ // loader 默认是 从右到左 从下到上执行
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },

            }
        ]
    }
}